Vue.component('product-display', {
    template: `<div class="bg-white mt-2 rounded-lg">
    <div class="flex justify-between align-center py-2">
        <span class="font font-weight-bold ml-2">产品展示</span>
        <div class="font text-muted mr-2" @click="toMore()">
            <span>查看更多</span>
            <i class="el-icon-arrow-right"></i>
        </div>
    </div>
    <div class="mx-2 flex justify-between flex-wrap">
        <div :style="goodsItem" class="py-2 mb-2 rounded-lg bg-light" v-for="(item, index) in recommendGoods" :key="index" @click="toDetail(item)">
            <div class="mx-2">
                <div :style="goodsImg" class="flex align-center overflow-hidden rounded">
                    <el-image :src="imageApi + item.Picture_URL" fit="contain" class="w-100 rounded"></el-image>
                </div>
                <span :style="goodsName" class="font text-dark mt-1 font-weight-bold">{{ item.Article_Name }}</span>
                <span :style="goodsEnterprise" class="text-success font-sm">{{ item.Category_Name }}</span>
                <span :style="goodsEnterprise" class="text-dark font-sm">品牌:{{ item.Brand_Name }}</span>
                <div class="font-sm text-danger font-weight-bolder mt-1">¥{{ Unit_Price(item) }}</div>
                <span :style="goodsEnterprise" class="text-muted font-small">{{ item.Enterprise_Name }}</span>
            </div>
        </div>
    </div></div>`,
    data() {
        return {
            recommendGoods: []
        }
    },
    mounted() {
        this.init();
    },
    computed: {
        goodsItem() {
            return {
                width: 'calc((100% - 20rem) / 2)',
            }
        },
        goodsImg() {
            return {
                width: '100%',
                height: '150px',
                objectFit: 'cover'
            }
        },
        goodsName() {
            return {
                display: '-webkit-box',
                '-webkit-box-orient': 'vertical',
                '-webkit-line-clamp': 2,
                overflow: 'hidden',
            }
        },
        goodsEnterprise() {
            return {
                display: '-webkit-box',
                '-webkit-box-orient': 'vertical',
                '-webkit-line-clamp': 1,
                overflow: 'hidden',
            }
        },
        Unit_Price() {
            return function (item) {
                const { Sales_Unit_Price1, Sales_Unit_Price2 } = item;
                if (Sales_Unit_Price1 == Sales_Unit_Price2) {
                    return Number(Sales_Unit_Price1).toFixed(2)
                } else {
                    return Number(Sales_Unit_Price1).toFixed(2) + '~' + Number(Sales_Unit_Price2).toFixed(2)
                }
            }
        }
    },
    methods: {
        async init() { // 查询零售商品
            try {
                const res = await generalApi.generalPaginationQueryBySQLSerialNumberWithClient({
                    SQLSerialNumber: 'm_daily_execute_unitprice',
                    PaginationNumber: 1,
                    RowAmount: 8,
                    Condition: utf8ToBase64(`%%,%%`),
                })
                this.recommendGoods = res.Rows;
            } catch (error) {
                console.error(error);
            }
        },
        toMore() {// 点击查看更多
            window.location.href = `../index/goods.html`;
        },
        toDetail(item) {// 点击商品明细
            window.location.href = `../detail/goods-detail.html?id=${item.Article_SerialNumber}`;
        }
    }
})